<template>
  <div class="boolean-input">
    <el-switch
      v-model="localValue"
      :active-text="activeText"
      :inactive-text="inactiveText"
      :active-value="activeValue"
      :inactive-value="inactiveValue"
      :disabled="param.disabled"
      @change="handleChange"
    />
    
    <!-- 单选按钮备选方案 -->
    <div v-if="param.displayAs === 'radio'" class="radio-alternative">
      <el-radio-group
        v-model="localValue"
        :disabled="param.disabled"
        @change="handleChange"
      >
        <el-radio :label="activeValue">{{ activeText }}</el-radio>
        <el-radio :label="inactiveValue">{{ inactiveText }}</el-radio>
      </el-radio-group>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BooleanInput',
  props: {
    param: {
      type: Object,
      required: true
    },
    value: {
      type: [Boolean, String, Number],
      default: false
    }
  },
  data() {
    return {
      localValue: this.normalizeValue(this.value)
    }
  },
  computed: {
    // 激活状态文本
    activeText() {
      return this.param.activeText || '是'
    },
    
    // 非激活状态文本
    inactiveText() {
      return this.param.inactiveText || '否'
    },
    
    // 激活状态值
    activeValue() {
      return this.param.activeValue !== undefined ? this.param.activeValue : true
    },
    
    // 非激活状态值
    inactiveValue() {
      return this.param.inactiveValue !== undefined ? this.param.inactiveValue : false
    }
  },
  watch: {
    value(newVal) {
      this.localValue = this.normalizeValue(newVal)
    }
  },
  methods: {
    // 标准化值
    normalizeValue(value) {
      if (value === null || value === undefined) {
        return this.inactiveValue
      }
      
      // 如果值是字符串或数字，尝试转换为对应的布尔值
      if (typeof value === 'string' || typeof value === 'number') {
        if (value === this.activeValue) {
          return this.activeValue
        }
        if (value === this.inactiveValue) {
          return this.inactiveValue
        }
        
        // 尝试常见布尔字符串
        const trueValues = ['true', '1', 'yes', '是', 'on']
        const falseValues = ['false', '0', 'no', '否', 'off']
        
        const stringValue = String(value).toLowerCase()
        if (trueValues.includes(stringValue)) {
          return this.activeValue
        }
        if (falseValues.includes(stringValue)) {
          return this.inactiveValue
        }
      }
      
      return value ? this.activeValue : this.inactiveValue
    },
    
    handleChange(value) {
      const normalizedValue = this.normalizeValue(value)
      const isValid = this.validateBoolean(normalizedValue)
      const message = isValid ? '' : '布尔值无效'
      
      this.$emit('change', {
        value: normalizedValue,
        isValid,
        message
      })
    },
    
    validateBoolean(value) {
      // 布尔值验证通常很简单，只需要检查是否为预期值
      return value === this.activeValue || value === this.inactiveValue
    }
  }
}
</script>

<style scoped>
.boolean-input {
  width: 100%;
  display: flex;
  align-items: center;
}

.radio-alternative {
  margin-left: 0;
}

:deep(.el-switch) {
  margin-right: 8px;
}

:deep(.el-radio-group) {
  display: flex;
  gap: 16px;
}
</style>